<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在线拍照</title>
    <script>
      //访问用户媒体设备的兼容方法
      let trackArr = [];
      function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
          // 最新的标准API
          navigator.mediaDevices
            .getUserMedia(constraints)
            .then(success)
            .catch(error);
        } else if (navigator.webkitGetUserMedia) {
          // webkit核心浏览器
          navigator.webkitGetUserMedia(constraints, success, error);
        } else if (navigator.mozGetUserMedia) {
          // firfox浏览器
          navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
          // 旧版API
          navigator.getUserMedia(constraints, success, error);
        }
      }
      function success(stream) {
        // 兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        trackArr = stream.getTracks();
        video.srcObject = stream;
        video.play();
      }
      function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
      }
    </script>
  </head>

  <body>
    <video id="video" width="480" height="320"></video>
    <div>
      <button id="open">打开摄像头</button>
      <button id="capture">拍照</button>
      <button id="close">关闭摄像头</button>
    </div>
    <!-- <canvas id="canvas" width="480" height="320"></canvas> -->
    <script>
      let video = document.getElementById("video");
      let canvas = document.createElement("canvas");
      canvas.width = video.getAttribute("width");
      canvas.height = video.getAttribute("height");
      let context = canvas.getContext("2d");
      document.querySelector("#open").addEventListener("click", () => {
        if (
          navigator.mediaDevices.getUserMedia ||
          navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia
        ) {
          //调用用户媒体设备, 访问摄像头
          getUserMedia({ video: { width: 480, height: 320 } }, success, error);
          // 调用移动端后摄像头
          // getUserMedia(
          //   { audio: true, video: { facingMode: { exact: "environment" } } },
          //   success,
          //   error
          // );
        } else {
          alert("不支持访问用户媒体");
        }
      });

      document.querySelector("#close").addEventListener("click", () => {
        trackArr.forEach((track) => {
          track.stop();
        });
      });

      document.getElementById("capture").addEventListener("click", function () {
        context.drawImage(video, 0, 0, 480, 320);
        let imgBase64 = canvas.toDataURL("image/png", 0.9);
        console.log("imgBase64", imgBase64);
      });
    </script>
  </body>
</html>
